<template>
  <div id="supervisionInformationDetailjjgc" class="app-container">
    <div class="mainBox">
      <div class="leftBox">
        <div class="leftBox_title">竣工初审片块信息</div>
        <div class="leftBox_title_sub">
          <div class="leftBox_title_sub_piankuai leftBox_title_sub_text">
            <span>片块名：</span>
            {{mainData.landName}}
          </div>
          <div class="leftBox_title_sub_shijian leftBox_title_sub_text">
            <span>时间：</span>
            {{mainData.time}}
          </div>
        </div>
        <div class="checkOut" v-if="nowType==1">
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked">是否符合土地利用规划？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked1">是否符合土地整治规划？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked2">是否符合乡镇建设规划？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked3">坡度是否大于25度？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked4">土地权利人是否自愿申请？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked5">是否与周边农用地相连？</el-checkbox>
          </div>
        </div>

        <div class="checkOut" v-if="nowType==2">
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked6">测绘成果与实地是否一致？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked7">主体房屋是否已复垦？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked8">实施范围是否与现场一致？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked9">工程位置是否准确？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked10">复垦后照片能否反映现状？</el-checkbox>
          </div>
          <div class="checkOut_item">
            <el-checkbox :disabled="true" v-model="checked11">工程量标注是否准确？</el-checkbox>
          </div>
        </div>
        <div class="leftBox_line"></div>
        <div class="fujianBox">
          <div class="fujianList" v-if="list.length!=0">
            <div class="fujianList_item" v-for="(item,index) in list" :key="index">
              <div class="fujianList_item_left">{{item.name}}</div>
              <div class="fujianList_item_right" @click="seeImgFunc(item)">查看</div>
            </div>
          </div>
          <div class="fujianList fujianNoData" v-else>暂无数据</div>
        </div>
      </div>
      <div class="rightBox">
        <tdMap
          :zhjgList="zhjgList"
          class="mapBox_right"
          ref="tdMap"
          :pkList="mainDataData"
          :isShowControls="false"
        />
      </div>
    </div>
    <!-- <div class="boxTitle">
      <div class="boxTitle_title">{{mainData.landName}}</div>
      <div class="boxTitle_time">{{typeText}}时间：{{mainData.time}}</div>
    </div>
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">竣工测绘现场位置信息</span>
      </div>
      <div class="boxItem_content">
        <tdMap style="height: 600px" class="mapBox_right" ref="tdMap" :pkList="mainDataData" :isShowControls="false" />
      </div>
    </div>
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">竣工测绘方位角信息</span>
      </div>
      <div class="boxItem_content">
        <el-table
          style="margin-top:30px;"
          :header-cell-style="{background:'#f9f9f9',color:'#606266'}"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column type="index" align="center" label="序号" width="120"></el-table-column>
          <el-table-column label="照片名称">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="seeImgFunc(scope.row, scope.$index)" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>-->
    <!-- <div ref="panorama" class="imgBox" style="text-align:center;width:100%;height:500px"></div> -->
    <el-dialog
      :close-on-click-modal="false"
      title="查看图片"
      :visible.sync="imgFlagControl"
      :before-close="handleClose"
      class="seeImgBox"
    >
      <div class="imgBox" style="text-align:center;">
        <img style="max-width:500px;min-height:500px;margin-top:20px;" :src="$https + imgHttp" alt />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="imgFlagControl = false">取 消</el-button>
        <el-button type="primary" @click="imgFlagControl = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="查看全景图"
      :visible.sync="panoramaPopup"
      class="seeImgBox"
    >
      <div ref="panorama" class="imgBox" style="text-align:center;width:100%;height:500px"></div>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="imgShow1"
      :before-close="handleClose1"
      class="imgDaolig"
    >
      <div class="imgBox" style="width:500px;height:500px;margin:0 auto;" v-if="showImgType1==1">
        <img style="width:100%;height:100%;" :src="$https+imgSrc1" alt />
      </div>
      <div class="imgBox" style="width:700px;height:400px;margin:0 auto;" v-if="showImgType1==2">
        <video
          id="showVedio"
          autoplay
          controls
          style="width:100%;height:100%;"
          :src="$https+imgSrc1"
        ></video>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose1">取 消</el-button>
        <el-button type="primary" @click="handleClose1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PhotoSphereViewer from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import {
  laterEnterpriseCheck,
  supervisingInfo,
  earlySupervisingInfo,
  earlyEnterpriseCheck,
  chushenJianguanDetail,
  chushenData
} from "@/api/jjgc";
import { getLandStatusMapAuditInfo } from "@/api/jjgc";
import mapInit from "@/api/mapConfig";
import tdMap from "@/components/tdMap";
import { selectLaterMultiPolygon } from "@/api/common";
export default {
  components: {
    tdMap
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      //综合监管信息附件类型切换
      imgShow1: false,
      showImgType1: 1,
      imgSrc1: "",
      fujianType: 1,
      imgHttp: "", //图片地址
      imgFlagControl: false,
      activeName: "1",
      list: [],
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        projectId: localStorage.getItem("projectId"),
        landId: "",
        applicantName: "",
        startTime: "",
        endTime: ""
      },
      total: 0, //总数
      landId: "", //片块ID
      mainData: "",
      typeText: "现场勘查",
      checked: true,
      checked1: true,
      checked2: true,
      checked3: true,
      checked4: true,
      checked5: true,

      checked6: true,
      checked7: true,
      checked8: true,
      checked9: true,
      checked10: true,
      checked11: true,
      nowType: 1,
      mainDataData: [],
      panoramaPopup: false,
      panoramaImg: require("@/assets/panorama.jpg"),
      quanjin: "",
      zhjgList: [],
      vcr: "",
      photo: "",
      title: ""
    };
  },
  // created() {
  //   },
  created() {
    this.zhjgList.push(JSON.parse(localStorage.getItem("zongheItem")));
    this.landId = this.$route.query.id;
    this.nowType = this.$route.query.type;
    if (this.$route.query.type == 2) {
      this.vcr = this.$route.query.vcr;
      this.photo = this.$route.query.photo;

      this.getDetail1();
      this.getOneData();
    } else {
      this.getDetail();
    }
  },
  methods: {
    // 获取列表的一条
    getOneData() {
      var data = {
        landId: this.landId,
        projectId: localStorage.getItem("projectId"),
        page: 1,
        size: 1
      };
      chushenData(data)
        .then(res => {
          console.log(res);
          this.checked6 =
            res.data.rows[0].ifDonateRight == "YES" ? true : false;
          this.checked7 =
            res.data.rows[0].ifResultRight == "YES" ? true : false;
          this.checked8 = res.data.rows[0].ifztfw == "YES" ? true : false;
          this.checked9 = res.data.rows[0].ifssfw == "YES" ? true : false;
          this.checked10 = res.data.rows[0].ifgcwz == "YES" ? true : false;
          this.checked11 = res.data.rows[0].iffyxz == "YES" ? true : false;
        })
        .catch(error => {});
    },
    handleClose1() {
      this.imgShow1 = false;
    },
    // 查看图片
    seeImgFunc(row) {
      if (this.nowType == "2") {
        this.imgShow1 = true;
        this.imgSrc1 = row.path;
        this.showImgType1 = row.type;
        if (row.type == 1) {
          this.title = "查看图片";
        } else {
          this.title = "查看视频";
          this.$nextTick(() => {
            var vedio = document.getElementById("showVedio");
            vedio.play();
          });
        }
        console.log(row);
      } else {
        if (row.id == 1) {
          this.imgHttp = row.src;
          this.imgFlagControl = true;
        } else if (row.id == 2) {
          this.panoramaPopup = true;
          this.quanjin = row.panoramagramFilePath;
          if (!this.$refs.panorama) {
            this.$nextTick(() => {
              PhotoSphereViewer({
                panorama:
                  this.quanjin == "" || this.quanjin == null
                    ? this.panoramaImg
                    : this.$https + this.quanjin,
                container: this.$refs.panorama,
                time_anim: 3000,
                navbar: true,
                navbar_style: {
                  backgroundColor: "rgba(58, 67, 77, 0.7)"
                }
              });
            });
          }
        }
      }
    },
    // 关闭查看图片显示框
    handleClose() {
      this.imgFlagControl = false;
    },
    // 获取详情1
    getDetail1() {
      this.typeText = "竣工初审信息";
      var data = {
        landId: this.landId
      };

      selectLaterMultiPolygon(data).then(res => {
        let obj = res.data;
        let array = [];
        array.push(obj);
        this.mainDataData = array;
      });
      this.mainLoading = true;
      var chushenData = {
        // landId:this.landId,
        page: 1,
        size: 10,
        photo: this.photo,
        vcr: this.vcr
        // landId:2,
      };
      chushenJianguanDetail(chushenData)
        .then(res => {
          this.mainLoading = false;
          var imageGeShi = ["bmp", "pcx", "png", "jpg", "jpeg", "gif", "tiff","BMP", "PCX", "PNG", "JPG", "JPEG", "GIF", "TIFF"];
          var videoGeShi = [
            "mp4",
            "avi",
            "flv",
            "rmvb",
            "mkv",
            "mov",
            "rm",
            "3gp"
          ];
          var mainList = [];
          var mainList1 = [];
          res.data.rows.forEach((item, index) => {
            imageGeShi.forEach(item1 => {
              if (
                item.fileKey.substring(
                  item.fileKey.indexOf(".") + 1,
                  item.fileKey.length
                ) == item1
              ) {
                var index = item.fileKey.indexOf(".");
                var photoType = item.fileKey.substring(
                  index,
                  item.fileKey.length
                );
                mainList.push({
                  name: "初审照片",
                  path: item.filePath,
                  type: 1,
                  flieType: photoType
                });
              }
            });
          });
          res.data.rows.forEach((item, index) => {
            videoGeShi.forEach(item1 => {
              if (
                item.fileKey.substring(
                  item.fileKey.indexOf(".") + 1,
                  item.fileKey.length
                ) == item1
              ) {
                var index = item.fileKey.indexOf(".");
                var vedioType = item.fileKey.substring(
                  index,
                  item.fileKey.length
                );
                mainList1.push({
                  name: "初审视频",
                  path: item.filePath,
                  type: 2,
                  flieType: vedioType
                });
              }
            });
          });
          //名称处理
          mainList.forEach((item, index) => {
            item.name = item.name + (index != 0 ? index : "") + item.flieType;
          });
          mainList1.forEach((item, index) => {
            item.name = item.name + (index != 0 ? index : "") + item.flieType;
          });

          this.list = mainList.concat(mainList1);
          console.log(this.list, "this.list");
        })
        .catch(error => {
          this.mainLoading = false;
        });
    },
    // 获取详情
    getDetail() {
      this.typeText = "竣工测绘信息";
      this.listLoading = true;
      var data1 = {
        landId: this.landId
      };
      selectLaterMultiPolygon(data1).then(res => {
        let obj = res.data;
        let array = [];
        array.push(obj);
        this.mainDataData = array;
      });
      laterEnterpriseCheck(data1)
        .then(res => {
          this.listLoading = false;
          this.mainData = res.data;
          if (
            res.data.positionOneFilePath != null &&
            res.data.positionOneFilePath != ""
          ) {
            var index = res.data.positionOneFilePath.indexOf(".");
            var positionOneFilePathType = res.data.positionOneFilePath.substring(
              index,
              res.data.positionOneFilePath.length
            );
            this.list.push({
              name: "复垦点方位一照片" + positionOneFilePathType,
              src: res.data.positionOneFilePath,
              id: 1
            });
          }
          if (
            res.data.positionTwoFilePath != null &&
            res.data.positionTwoFilePath != ""
          ) {
            var index = res.data.positionTwoFilePath.indexOf(".");
            var positionTwoFilePathType = res.data.positionTwoFilePath.substring(
              index,
              res.data.positionTwoFilePath.length
            );
            this.list.push({
              name: "复垦点方位二照片" + positionTwoFilePathType,
              src: res.data.positionTwoFilePath,
              id: 1
            });
          }
          if (
            res.data.positionThreeFilePath != null &&
            res.data.positionThreeFilePath != ""
          ) {
            var index = res.data.positionThreeFilePath.indexOf(".");
            var positionThreeFilePathType = res.data.positionThreeFilePath.substring(
              index,
              res.data.positionThreeFilePath.length
            );
            this.list.push({
              name: "复垦点方位三照片" + positionThreeFilePathType,
              src: res.data.positionThreeFilePath,
              id: 1
            });
          }
          if (
            res.data.positionFourFilePath != null &&
            res.data.positionFourFilePath != ""
          ) {
            var index = res.data.positionFourFilePath.indexOf(".");
            var positionFourFilePathType = res.data.positionFourFilePath.substring(
              index,
              res.data.positionFourFilePath.length
            );
            this.list.push({
              name: "复垦点方位四照片" + positionFourFilePathType,
              src: res.data.positionFourFilePath,
              id: 1
            });
          }
          if (
            res.data.panoramagramFilePath != null &&
            res.data.panoramagramFilePath != ""
          ) {
            var index = res.data.panoramagramFilePath.indexOf(".");
            var panoramagramFilePathType = res.data.panoramagramFilePath.substring(
              index,
              res.data.panoramagramFilePath.length
            );
            this.list.unshift({
              name: "空中全景照片" + panoramagramFilePathType,
              src: res.data.panoramagramFilePath,
              id: 2
            });
          }

          if (res.data.trackRecord != null && res.data.trackRecord != "") {
            var shepiArr = JSON.parse(res.data.trackRecord);
            var newArr = [];
            shepiArr[0].locationList.forEach(item => {
              var arrItem = [];
              arrItem[0] = item.longitude;
              arrItem[1] = item.latitude;
              newArr.push(arrItem);
            });
            this.mainData.coorDonate = newArr;
          }
        })
        .catch(error => {
          this.listLoading = false;
        });
    }
  }
}
</script>
<style lang="scss" scoped>
#supervisionInformationDetailjjgc {
  padding: 30px 40px;
  box-sizing: border-box;
  /* padding-left: 130px;
  padding-right: 100px; */
}
#supervisionInformationDetailjjgc .boxItem {
  width: 100%;
  background-color: #fff;
}
#supervisionInformationDetailjjgc .boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
#supervisionInformationDetailjjgc .boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
#supervisionInformationDetailjjgc .boxItem_content_row {
  display: flex;
  align-items: center;
}
#supervisionInformationDetailjjgc .boxItem_content_row_item {
  display: flex;
  align-items: center;
}
#supervisionInformationDetailjjgc .boxItem_content_row_item {
  margin-right: 30px;
}
#supervisionInformationDetailjjgc .boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
}
#supervisionInformationDetailjjgc .boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
#supervisionInformationDetailjjgc .boxItem_content_row_item p:last-child {
  color: #666;
}
#supervisionInformationDetailjjgc .uploadDownLoadBox_item p {
  width: 140px;
}
#supervisionInformationDetailjjgc .button_box {
  margin-top: 30px;
}
#supervisionInformationDetailjjgc .button_box_item {
  margin-right: 10px;
}
#supervisionInformationDetailjjgc .errorBox /deep/ .el-dialog {
  width: 800px;
}
#supervisionInformationDetailjjgc .piankuaixinxi .title {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
  border-top: none;
}
#supervisionInformationDetailjjgc .piankuaixinxi .title1 {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
}
#supervisionInformationDetailjjgc .boxTitle {
  margin-bottom: 30px;
}
#supervisionInformationDetailjjgc .boxTitle .boxTitle_title {
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
}
#supervisionInformationDetailjjgc .boxTitle_time {
  font-size: 14px;
  color: #999;
  margin-top: 20px;
  margin-bottom: 30px;
}
#supervisionInformationDetailjjgc .checkOut_item {
  margin-bottom: 10px;
}
#supervisionInformationDetailjjgc
  /deep/
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}
#supervisionInformationDetailjjgc
  /deep/
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner::after {
  border-color: #fff;
}
#supervisionInformationDetailjjgc
  /deep/
  .el-checkbox__input.is-disabled
  + span.el-checkbox__label {
  color: #12203e;
}

.mainBox {
  width: 100%;
  display: flex;
  height: calc(100vh - 174px);
}
.leftBox {
  width: 30%;
  margin-right: 5%;
}
.leftBox_title {
  color: #4d4d4d;
  font-size: 18px;
  font-weight: bold;
  line-height: 25px;
}
.leftBox_title_sub {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.leftBox_title_sub .leftBox_title_sub_piankuai {
  margin-right: 40px;
}
.leftBox_title_sub .leftBox_title_sub_text {
  color: #595959;
  font-size: 14px;
}
.leftBox_title_sub_text span {
  color: #737373;
}
.leftBox_line {
  /* width:80%; */
  height: 1px;
  background: rgba(235, 238, 245, 1);
  opacity: 1;
  margin-top: 30px;
  margin-bottom: 14px;
}
.fujianBox_tabs {
  display: flex;
  align-items: center;
}
.fujianBox_tabs_item {
  width: 60px;
  height: 28px;
  background: #f0f3f5;
  opacity: 1;
  border-radius: 2px;
  color: #696969;
  font-size: 14px;
  margin-right: 8px;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
}
.fujianBox_tabs_item.on {
  background: #409eff;
  color: #fff;
}
.fujianList {
  /* width: 70%; */
  margin-top: 14px;
}
.fujianList_item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 56px;
  line-height: 56px;
}
.fujianList_item .fujianList_item_left {
  color: #606266;
  font-size: 14px;
}
.fujianList_item .fujianList_item_right {
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
}
.rightBox {
  width: 70%;
}
.fujianNoData {
  text-align: center;
  margin-top: 50px;
  letter-spacing: 8px;
  color: #696969;
}
</style>
